<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {ElMessage, ElMessageBox, FormInstance, FormRules} from "element-plus";
import {everyrechargeapi, getditchskadminapi, longrechargeapi} from "@/api/api";

const emits = defineEmits(['update:show', 'success'])
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    type: {
        type: Number,
        default: false
    },
    rechargeCompanyId: {
        type: Number,
        required: true
    },
    companyName: {
        type: String,
        required: true
    },
    ditch: {
        type: Number,
        required: true
    },
})
const form = reactive({
    rechargeAmount: 0,
    receiptId: '',
    payMode: '',
})
const rule = reactive<FormRules>({
    receiptId: [
        {
            required: true,
            message: '请选择收款账户',
            trigger: 'change',
        },
    ],
    payMode: [
        {
            required: true,
            message: '请选择充值方式',
            trigger: 'change',
        },
    ],
    rechargeAmount: [
        {required: true, message: '请输入充值金额', trigger: 'blur'},
    ],
})
const everypayruleFormRef = ref<FormInstance>()
const isMobile = ref((window as any).isMobile)
const skzhlist = ref([] as any)
const getditchskadmin = async () => {
    const res: any = await getditchskadminapi(props.ditch, {noLoading: true})
    console.log(res, '获取渠道对应收款账户')
    skzhlist.value = res.list
}
const dialogeveryVisible = ref(false)
const companyName = ref('')
const daypayfileList = ref([])
const daypayselectedImage = ref<any>(null)
const daypayonChange = (file: any, fileListVal: any) => {
    const reader = new FileReader()
    reader.onload = (event: any) => {
        const url = event.target.result
        console.log(url)
        daypayselectedImage.value = url
    }
    reader.readAsDataURL(file.raw)
    daypayfileList.value = fileListVal
}
const daypayuploadRef = ref()
const everypayresetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogeveryVisible.value = false
    daypayuploadRef.value.clearFiles()
    daypayselectedImage.value = null
}
const everypaysubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.type === 1) {
                longrechargeapi({
                    companyId: props.rechargeCompanyId,
                    payMode: form.payMode,
                    receiptId: form.receiptId,
                    rechargeAmount: form.rechargeAmount,
                    voucherUrl: daypayselectedImage.value?daypayselectedImage.value.split(',')[1]:'',
                }).then((res: any) => {
                    console.log(res)
                    if (res.code === 200) {
                        ElMessage({
                            message: '充值成功。',
                            type: 'success',
                        })
                        everypayresetForm(everypayruleFormRef.value)
                        dialogeveryVisible.value = false
                        emits('success')
                    }
                })
            }
            if (props.type === 2) {
                everyrechargeapi({
                    companyId: props.rechargeCompanyId,
                    payMode: form.payMode,
                    receiptId: form.receiptId,
                    rechargeAmount: form.rechargeAmount,
                    voucherUrl: daypayselectedImage.value?daypayselectedImage.value.split(',')[1]:'',
                }).then((res: any) => {
                    console.log(res)
                    if (res.code === 200) {
                        ElMessage({
                            message: '充值成功。',
                            type: 'success',
                        })
                        everypayresetForm(everypayruleFormRef.value)
                        dialogeveryVisible.value = false
                        emits('success')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
const onBeforeClose = (done: () => void) => {
    everypayresetForm(everypayruleFormRef.value)
    done()
}
watch(() => props.show, (newVal) => {
    dialogeveryVisible.value = newVal
    if (newVal) {
        console.log(props.rechargeCompanyId, 'props.rechargeCompanyId')
        companyName.value = props.companyName
        getditchskadmin()
    }
})

watch(dialogeveryVisible, (newVal) => {
    console.log(newVal, 'hjsdhjgshj')
    emits('update:show', newVal)
})
</script>

<template>
    <el-dialog :width="isMobile ? '580' : '30%'" v-model="dialogeveryVisible" :before-close="onBeforeClose"
               :title="companyName + (props.type===1?'长期保':'日日保') + '充值窗口'">
        <el-form ref="everypayruleFormRef" :model="form" :rules="rule" label-width="120px"
                 class="demo-ruleForm" status-icon label-position="top">
            <el-form-item label="充值金额" prop="rechargeAmount">
                <el-input-number v-model="form.rechargeAmount" placeholder="请输入金额"/>
            </el-form-item>
            <el-form-item label="收款账户" prop="receiptId">
                <el-select v-model="form.receiptId" placeholder="请选择收款账户">
                    <el-option v-for="item in skzhlist" :key="item.id" :label="item.bankName" :value="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="付款方式" prop="payMode">
                <el-select v-model="form.payMode" placeholder="请选择付款方式">
                    <el-option label="公对公" :value="1"/>
                    <el-option label="扫码" :value="2"/>
                    <el-option label="私对公" :value="3"/>
                    <el-option label="赠送" :value="4"/>
                </el-select>
            </el-form-item>
            <el-form-item label="上传凭证">
                <el-upload ref="daypayuploadRef" class="upload-demo" :file-list="daypayfileList"
                           :on-change="daypayonChange" accept=".png,.jpeg,.jpg" :limit="1" :auto-upload="false">
                    <template #trigger>
                        <el-button type="primary" class="my_btn">选择文件
                        </el-button>
                    </template>
                    <template #tip>
                        <div class="el-upload__tip">
                            大小限制5MB，支持png、jpeg、jpg格式文件
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
                <span class="dialog-footer" style="display: flex; align-items: center; justify-content: center">
                    <el-button class="my_cancelbtn" @click="everypayresetForm(everypayruleFormRef)">取消</el-button>
                    <el-button class="my_btn" @click="everypaysubmitForm(everypayruleFormRef)" type="primary"
                               style="background-color: #0256ff">确定</el-button>
                </span>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">

</style>
